<template>
  <div
  v-loading="loading"
  style="height: 100%;"
  element-loading-text="拼命加载数据中"
  >
    <div class="table_resource" style="text-align: center;height: 95%;">
      <el-table
      height=100%
      :data="showTable" border
       style="width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
      :cell-style="{'text-align':'center'}"
       stripe
      >
        <el-table-column
          prop="phaseName"
          label="阶段名称"
        >
        </el-table-column>
        <el-table-column
          prop="batchName"
          label="批次名称"
        >
        </el-table-column>
        <el-table-column
          prop="proName"
          label="项目名称"
        >
        </el-table-column>
        <el-table-column label="延期原因" >
          <template slot-scope="scope">
            <span>
              {{getSimpleText(scope.row.delayCause)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right"  width="400" >
          <template slot="header">
            <input v-model="keywords" placeholder="请输入项目名称" class="el-input__inner" />
          </template>
		  <template slot-scope="scope">
        <div >
          <el-button
            size="mini"
            type="primary"
            @click="AuditDelay(scope.row.proId,25)"
            >
            同意
            </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="AuditDelay(scope.row.proId,26)"
            >
            不同意
            </el-button>
        </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="resource-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5,10, 15]"
        :page-size="pagesize"
        :pager-count="7"
        layout=" prev, pager, next,sizes, jumper"
        :total="filterDataShow.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading:true,
      teacherInfo:this.$store.state.info,
      keywords: "", // 搜索的关键字
      filterDataShow: [], //储存符合条件的数据-
      tableData: [], //分页前的数据
      pagesize: 5,
      currentPage: 1,
      BatchIsHasData:"",
    };
  },
  mounted() {
    this.getDataAxios();
  },
  methods: {
    AuditDelay(proId,Approval){
      //24 申请延期 25 院级同意延期 26 院级不同意延期
      this.$confirm('此操作将审核该延期请求, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }).then(() => {
                this.$api.project.updateProByProId({
                  proId:proId,
                  proApproval:Approval,
                  proStatus:0
                  }).then((res)=>{
                  console.log(res)
                  this.getDataAxios()
                })
                this.$message({
                  type: 'success',
                  center: true,
                  message: '审核成功!' 
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  center: true,
                  message: '已取消审核'
                });
              });
    }
    ,
    getSimpleText(richText){
      var re1 = new RegExp("<.+?>","g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      var msg = richText.replace(re1,'');//执行替换成空字符
      return msg;
    },
    getNowDate(){
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1): nowDate.getMonth() + 1;
      var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
       .getDate();
      var dateStr = year + "-" + month + "-" + day;
      console.log(dateStr)
      return dateStr
    },
    newBatch(){
        this.$router.push( '/batchCreat')
    },
    //获取批次数据
    getDataAxios() {
	  this.$api.project.getAllDelayProject()
	  .then(
	  (response)=>{
	  	console.log(response)
      console.log(this.teacherInfo)
	  	this.tableData=response.data.data.filter(item=> item.proDepId==this.teacherInfo.bmbh && item.proApproval==24)
	  	console.log(this.tableData)
      this.loading=false
      this.searchResource(); //在页面挂载后调用此方法，确保数据与页面发生了交互
	  })
 }
	,
    //查询
    searchResource() {
      this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
      let filterKeywords = this.keywords.trim();
      let filerReasource = this.tableData.filter((item) => {
        //过滤全部数据
        if (item.batchName.includes(filterKeywords)) {
          return item;
        }
      });
      this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    }
  },
  watch: {
    //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
    keywords() {
      this.searchResource();
    },
  },
  computed: {
    //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {
      return this.filterDataShow.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },
  },
};
</script>
<style scoped>
#find {
  width: 400px;
  margin-bottom: 30px;
}
</style>
